<template>
  <div id="index">
    <div class="index1">
      <!-- 1.定位 -->
      <div class="dingwei">
        <img src="https://res.bestcake.com/images/newIndex/localtion.png" class="locImg" />
        <span class>上海</span>
        <img src="https://res.bestcake.com/images/newIndex/more.png" class="locImgr" />
      </div>
      <!-- 2.轮播图 -->
      <div class="banner">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item,index) in SwiperBannerList" v-bind:key="index">
            <img v-bind:src="item.ImgUrl" />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      
      <!-- 3.三个勾 -->
      <img
        style="width: 100%"
        src="https://res.bestcake.com/images/newIndex/title.png"
        class="title"
      />
      <!-- 4.土司的诱惑 -->
      <a class="guanggao">
        <img
          style="width:100%;"
          class="guanggaoImg"
          v-bind:src="AbsoluteBannerList"
        />
      </a>
      <!-- 5.六个焦点图 -->
      <ul class="iconList">
        <li class="cont" v-for="(item,index) in TopIconList" v-bind:key="index">
          <img v-bind:src="item.ImgUrl" />
          <p>{{item.ActName}}</p>
        </li>
      </ul>
    </div>
    <!-- 6.跑马灯 -->
    <div class="tongzi">
      <div class="tz">通知</div>
      <div class="pm">
        <p class="s8">{{NoticeList}}</p>
      </div>
    </div>
    <!-- 7.田字布局 -->
    <ul class="contentList">
      <li @click="toPath(item)" v-for="(item,index) in CenterContentList" v-bind:key="index">
        <a>
          <img v-bind:src="item.ImgUrl" alt />
        </a>
      </li>
    </ul>
    <!-- 8.swiper布局开始 -->
   <div  v-for="(item,index) in SaleList" v-bind:key="index" style="  background: #fafafa;">
      <div class="box-header">
        <a href>
          <img
            style="width:100%"
            class="box-header-img"
            :src="item.TabImgUrl"
          />
        </a>
      </div>
      <swiper_t v-if="SaleList.length!=0" :imglist="item.res"></swiper_t>
    </div>
     <!-- 8.swiper布局结束 -->
    <div id="dg"></div>
  </div>
</template>
<script>
import { constants } from "fs";
export default {
  data() {
    return {
      SwiperBannerList: [], //1轮播
      AbsoluteBannerList:"",//2大图
      TopIconList: [], //3六个焦点图
      NoticeList: "", //4通知
      CenterContentList: [],//5.田字布局
      SaleListe:[],//8.swiper布局商品数据
      SaleList: []//8.swiper布局
    };
  },
  computed: {
    isTopic() {
      return this.$store.state.isTopic;
    }
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    pageInit() {
      this._getIndexData(res => {
        // console.log(JSON.parse(res.SaleList[0].CakeList));
        // 首页数据
        console.log(res);
        this.SwiperBannerList = res.SwiperBannerList;
        this.AbsoluteBannerList=res.AbsoluteBannerList[0].ImgUrl;
        this.TopIconList = res.TopIconList;
        this.NoticeList = res.NoticeList;

        //5.田字布局
        this.CenterContentList = res.CenterContentList;

        // 首页8.Swiper布局数据开始
        // 方法一
        this.SaleList=res.SaleList
        this.SaleList.map(item => {
          item.res=JSON.parse(item.CakeList)
          item.res.map(item=>{
             item.ImgUrl = this.$global.setUrl(item);
           })
        });
        // 方法二
        // res.SaleList.map(item => {
        //   this.SaleListe.push(JSON.parse(item.CakeList));
        // });
        // this.SaleListe.map(item => {
        //   item.map(item => {
        //     item.ImgUrl = this.$global.setUrl(item);
        //   });
        // });
        // this.SaleList.map(item => {
        //     // console.log(item.Sort)
        //     if(item.Sort==1){
        //       return item.res=this.SaleListe[0]
        //     }else if(item.Sort==2){
        //       return item.res=this.SaleListe[1]
        //     } else if(item.Sort==3){
        //       return item.res=this.SaleListe[2]
        //     }
        // });
        // console.log(this.SaleList);
         // 首页8.Swiper布局数据结束


      });
    },
      toPath(item) {
       console.log(item);
      this.$router.push({
        path: "/show",
        query: {
          City: this.$store.state.city,
          SupplyNo:item.ProUrl,
          Name: item.ActName,
          Id: item.Id
        }
      });
      //query  {City: "上海",SupplyNo:"",Name:"xxxx",id:"1878"}
    },

    _getIndexData(callback) {
      this.$apis.getIndexData().then(res => {
        callback(res.data.Tag.mainresult);
      });
    }
  },
  watch: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#index {
  #dg{height: r(58);}
  .index1 {
    margin: 0 r(16);
    /* 1.定位 */
    .dingwei {
      display: flex;
      height: r(44);
      span {
        font: r(16) / r(44) "";
        margin: 0 r(4);
      }
      .locImg {
        height: r(22);
        margin-top: r(12);
      }
      .locImgr {
        height: r(16);
        margin-top: r(14);
      }
    }
    /* 2.轮播图 */
    .banner {
      width: 100%;
      height: r(180);
      overflow: hidden;
      border-radius: r(10);
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 5.六个焦点图 */
    .iconList {
      padding-bottom: r(20.001);
      display: flex;
      flex-wrap: wrap;
      .cont {
        width: 25%;
        img {
          width: r(52);
          height: r(52);
          margin: r(16) r(3.75) 0;
        }
        p {
          margin-top: r(11);
        }
      }
    }
  }
  /* 6.跑马灯 */
  .tongzi {
    display: flex;
    height: r(40.25);
    width: 100%;
    border-top: r(8) solid #fafafa;
    border-bottom: r(8) solid #fafafa;
    .tz {
      display: inline-block;
      color: #fff;
      width: r(36);
      height: r(20);
      line-height: r(20);
      border-radius: r(5);
      margin: r(11.25) 0 0 r(16);
      background: #1fb1b8;
    }
    .pm {
      margin-left: r(5);
      position: relative;
      width: r(294);
      overflow: hidden;
      white-space: nowrap;
      p {
        display: block;
        color: #1fb1b8;
        margin-left: r(350);
        margin-top: r(15);
        position: absolute;
        animation: pm 20s linear infinite;
      }
    }
    @keyframes pm {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(r(-2000)); // 每行高50
      }
    }
  }
  /* 7.田字布局 */
  .contentList {
    padding: r(16);
    height: r(241);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    li {
      width: r(166.98);
      height: r(100);
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: r(6);
      }
    }
  }
}
</style>
